<template>
  <!-- 单例批记录图片展示 Start -->
  <div class="png-box" @click="previewVisible = true">
    {{ item.JobItemName }}
    <div
      :class="[
        isTemplate
          ? 'no-img-box'
          : item.DataTypeIndex == 9
          ? 'def-box'
          : 'img-box',
      ]"
      v-if="isShow"
    >
      <img :src="imgSrc" alt="" />
    </div>
    <span v-else>/</span>
    <a-modal
      :visible="previewVisible"
      :footer="null"
      @cancel="handleCancel"
      :width="modalWidth"
      :style="{ height: modalHeight + 'px' }"
    >
      <img
        alt="网络链接失败"
        :class="[item.DataTypeIndex == 9 ? 'signature' : 'png']"
        :src="imgSrc"
        :style="{ transform: `scale(${scale})` }"
        @wheel="handleMouseWheel"
      />
    </a-modal>
  </div>
  <!-- 单例批记录图片展示 End -->
</template>

<script>
import { downloadEnclosureHis } from "@/api/Common"; //下载图片
export default {
  props: ["item", "currentValue", "isTemplate"],
  data() {
    return {
      imgSrc: null, //图片链接
      previewVisible: false, //放大图片
      isShow: true, //是否有图片
      scale: 1, // 缩放比例，初始为 1
      modalWidth: 0, // 弹窗宽度
      modalHeight: 0, // 弹窗高度
    };
  },
  methods: {
    //关闭查看图片
    handleCancel() {
      this.previewVisible = false;
      this.scale = 1; // 关闭弹窗时重置缩放比例
    },
    handleMouseWheel(event) {
      event.preventDefault();
      const delta = event.deltaY > 0 ? -0.1 : 0.1;
      const newScale = this.scale + delta;
      if (newScale > 0.1) {
        this.scale = newScale;
        // 根据图片原始大小和缩放比例更新弹窗大小
        const img = new Image();
        img.src = this.imgSrc;
        img.onload = () => {
          this.modalWidth = img.width * this.scale;
          this.modalHeight = img.height * this.scale;
        };
      }
    },
  },
  watch: {
    /* 监听是否有已经上传的文件,通过接口展示 */
    item: {
      async handler(newVal, oldVal) {
        if (newVal.SectionResultStr != null) {
          let res = await downloadEnclosureHis({
            relationTableId: newVal.JobRecordDetailID,
          });
          if (res.Data && res.Data.FilebyteStr != null) {
            this.isShow = true;
            this.imgSrc = `data:image/png;base64,${res.Data.FilebyteStr}`;
            // 初始化弹窗大小
            const img = new Image();
            img.src = this.imgSrc;
            img.onload = () => {
              this.modalWidth = img.width;
              this.modalHeight = img.height;
            };
          } else {
            this.isShow = false;
          }
        }
      },
      immediate: true,
      deep: true,
    },
  },
};
</script>

<style lang="less" scoped>
.png-box {
  overflow: hidden;

  .img-box {
    height: 12.5rem;
    width: 18.75rem;
  }
  .no-img-box {
    height: 3.125rem;
    width: 6.25rem;
  }

  img {
    width: 100%;
    height: 100%;
    transition: transform 0.3s ease; // 添加过渡效果
  }
  .def-box {
    height: 2.8rem !important;
    width: 5rem !important;
  }
}

.signature {
  height: 90% !important;
  width: 98% !important;
}

.png {
  width: 98%;
}

/deep/ .ant-modal-content {
  overflow: auto;
}

/deep/ .ant-modal-body {
  overflow: auto;
}
</style>
